{% extends 'common/goodspublic.html' %}
{% load static %}

{% block head %}
    <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
    <script>
        function changeImage() {
            document.getElementById("imgflag").src = "images/redherat.png";
        }
    </script>

    <style>
        .am-slider-default .am-control-nav {
            text-align: center;
        }

        .am-slider-default .am-control-nav li a.am-active {
            background: #cb2527;
        }

        .am-slider-default .am-control-nav li a {
            border: 0;
            width: 10px;
            height: 10px;
        }
    </style>
{% endblock %}


{% block header %}
    <header data-am-widget="header" class="am-header am-header-default sq-head ">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back()" class="">
                <i class="am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="" class="">商品详情</a>
        </h1>
    </header>
{% endblock %}

{% block content %}
    <div style="height: 49px;"></div>
    <!--图片轮换-->
    <div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
        <ul class="am-slides">
            {% for img in sku.gallerymodel_set.all %} }
                <li><img src="{{ MEDIA_URL }}{{ img.img_url }}"/></li>
            {% endfor %}
        </ul>
    </div>
    <div class="detal-info" style="position: relative; width: 100%;">
        <p>{{ sku.spu }}{{ sku.sku_name }}</p>
        <h2>商城价：<span>￥{{ sku.price }}</span></h2>
        <div class="heart">
            <img src="{% static 'images/herat.png' %}" width="25" id="imgflag" onclick="changeImage()"/>
            <p>收藏</p>
        </div>
    </div>
    <div class="d-amount">
        <h4>库存：{{ sku.stock }}{{ sku.unit.unit_name }}</h4>
        <div class="d-stock">
            <a class="decrease">-</a>
            <input id="num" readonly="" class="text_box" name="" type="text" value="1">
            <input id="id" type="hidden" value="644">
            <a class="increase">+</a>
            <span id="dprice" class="price" style="display:none"> 36</span>
        </div>
    </div>
    <div style="background: #eee; height: 10px;"></div>
    <div class="am-tabs detail-list" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">商品详情</a></li>
            <li><a href="#tab2">商品评论</a></li>
        </ul>

        <div class="am-tabs-bd">
            <div class="am-tab-panel am-fade am-in am-active detail " id="tab1">
                {{ sku.spu.spu_detail|safe }}
                <img src="{{ MEDIA_URL }}{{ sku.LOGO }}"/>
            </div>
            <div class="am-tab-panel am-fade detail " id="tab2">
                <!--<div class="comment">
                    <span>好评：</span>
                    <div class="com-good"></div>
                    <span>100%</span>
                </div>
                <div class="comment">
                    <span>中评：</span>
                    <div class="com-bad"></div>
                    <span>0%</span>
                </div>
                <div class="comment">
                    <span>差评：</span>
                    <div class="com-bad"></div>
                    <span>0%</span>
                </div>-->
                <ul class="comment-list">
                    <li class="current"><a href="">全部</a></li>
                    <li><a href="">好评（20）</a></li>
                    <li><a href="">中评（5）</a></li>
                    <li><a href="">差评（0）</a></li>
                </ul>
                <ul class="comment-pic">
                    <li>
                        <div class="tit">
                            <img src="{% static 'images/tx.png' %}" class="tx"/>
                            <span>songke2014</span>
                            <i> [2016-01-01]</i>
                        </div>
                        <div class="comment-con">
                            买了些给家人，都说不错！
                        </div>
                    </li>
                    <li>
                        <div class="tit">
                            <img src="{% static 'images/tx.png' %}" class="tx"/>
                            <span>songke2014</span>
                            <i> [2016-01-01]</i>
                        </div>
                        <div class="comment-con">
                            买了些给家人，都说不错！
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--底部-->
    <div style=" height: 55px;"></div>
    <ul class="fix-shopping">
        <li><a class="join" id="cart">加入购物车</a></li>
        <li><a href="tureorder.html" class="imm-buy">立即购买</a></li>
    </ul>
{% endblock %}

{% block foot %}

{% endblock %}

{% block foot_js %}
    <script>
        //购物数量加减
        $(function () {
            $('.increase').click(function () {
                var self = $(this);
                var current_num = parseInt(self.siblings('input').val());
                //当数量超过库存提示库存不足
                if ($('#num').val() < {{ sku.stock }}) {
                    current_num += 1;
                    self.siblings('input').val(current_num);
                }
                else {
                    alert('库存不足')
                }
            });

            $('.decrease').click(function () {
                var self = $(this);
                var current_num = parseInt(self.siblings('input').val());
                if (current_num > 1) {
                    current_num -= 1;
                    self.siblings('input').val(current_num);
                }
            });


            $('#cart').click(function () {
                                //准备数据
                var sku_id ={{ sku.pk }};
                var count = $('#num').val();
                var data = {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'count': count,
                    'sku_id': sku_id
                };
                //发送ajax请求
                $.ajax({
                    type: 'post',
                    url: '{% url "shopcart:增加" %}',
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            if (confirm('添加成功，是否去购物车结算')) {
                                location.href ="{% url 'shopcart:购物车' %}"
                            }
                            else {
                                location.href ="{% url 'goods:商品详情' sku.pk%}"
                            }
                        } else if(data.code==4){
                            if(confirm('未登录，是否立即登录')){
                                location.href="{% url 'user:登录' %}"
                            }
                        }else {
                            alert(data.errmsg)
                        }
                    }
                })
            })
        })
    </script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>
{% endblock %}
